<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>GB28181 Node Server</span>
      </div>
      <div class="text item">
        启动时间：{{ start }}
      </div>
    </el-card>
    <!--卡片视图区域-->
    <el-card>
      <el-row>
        <el-col :md="12" :xs="24">
          <el-card>
            <div>
              <v-chart :options="pieCpu" />
            </div>
          </el-card>
        </el-col>
        <el-col :md="12" :xs="24">
          <el-card>
            <div>
              <v-chart :options="pieMem" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>媒体服务器信息</span>
      </div>
      <div v-if="!mediaServers.length" style="color:red">
        没有设置媒体服务器信息，请到 “系统设置-媒体服务器设置” 中添加设置。
      </div>
      <div v-if="mediaServers.length>0">
        <el-table :data="mediaServers" style="width: 100%">
          <el-table-column prop="media_ip" label="外网主机地址" width="180" />
          <el-table-column prop="intranet" label="内网主机地址" width="180" />
          <el-table-column prop="http_port" label="http端口" width="100" />
          <el-table-column prop="rtmp_port" label="rtmp端口" width="100" />
          <el-table-column prop="server_id" label="serverId" width="140" />
          <el-table-column prop="rtp_min_port" label="rtp起始端口" width="100" />
          <el-table-column prop="rtp_max_port" label="rtp结束端口" width="100" />
          <el-table-column prop="alive" label="运行状态" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.alive" type="success">运行中</el-tag>
              <el-tag v-else type="danger">已停止</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getStatus } from '@/api/service'
import { formatTime } from '@/utils'
import { list } from '@/api/mediaServer'

import ECharts from 'vue-echarts' // 在 webpack 环境下指向 components/ECharts.vue
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'

const TAG = '[工作台]'

export default {
  name: 'Dashboard',
  components: {
    'v-chart': ECharts
  },
  data() {
    return {
      start: null,
      pieCpu: {
        title: {
          text: 'CPU占用率',
          subtext: '百分比'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        label: {
          formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
          backgroundColor: '#F6F8FC',
          borderColor: '#8C8D8E',
          borderWidth: 1,
          borderRadius: 4,

          rich: {
            a: {
              color: '#6E7079',
              lineHeight: 22,
              align: 'center'
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        labelLine: {
          length: 30
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['使用', '空闲']
        },
        dataset: {
          source: [
            ['CPU占用率', 'CPU'],
            ['使用', 0],
            ['空闲', 0]
          ]
        },
        series: [{
          type: 'pie',
          radius: 55
        }]
      },
      pieMem: {
        title: {
          text: '内存使用情况',
          subtext: 'MB'
        },
        tooltip: {
          trigger: 'item'
        },
        label: {
          formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c} MB  {per|{d}%}  ',
          backgroundColor: '#F6F8FC',
          borderColor: '#8C8D8E',
          borderWidth: 1,
          borderRadius: 4,

          rich: {
            a: {
              color: '#6E7079',
              lineHeight: 22,
              align: 'center'
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        labelLine: {
          length: 30
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['使用', '空闲']
        },
        dataset: {
          source: [
            ['内存使用情况', '内存'],
            ['使用', 0],
            ['空闲', 0]
          ]
        },
        series: [{
          type: 'pie',
          radius: 55
        }]
      },
      mediaServers: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getState()
    setInterval(() => {
      this.getState()
    }, 20 * 1000)
  },
  methods: {
    getState() {
      const that = this
      getStatus().then((ret) => {
        console.info(TAG, '服务状态', ret.data)
        const start = new Date(ret.data.start)
        that.start = formatTime(start)
        const cpuUsage = ret.data.cpu_usage
        const cpuFree = 100 - cpuUsage
        this.pieCpu.dataset.source = [
          ['service', 'CPU'],
          ['使用', cpuUsage.toFixed(1)],
          ['空闲', cpuFree.toFixed(1)]
        ]
        that.pieMem.dataset.source = [
          ['service', '内存'],
          ['使用', (ret.data.mem_total - ret.data.mem_free).toFixed(0)],
          ['空闲', ret.data.mem_free.toFixed(0)]
        ]
      })
      list().then((ret) => {
        console.info(TAG, '媒体服务器信息', ret.data)
        that.mediaServers = ret.data.servers
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 66px;
  }
  &-link{
    font-size: 24px;
    line-height: 24px
  }
}
.echarts {
  width: 100%;
  height: 350px;
}
</style>
